import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  Image, View, StyleSheet, Text
} from 'react-native'
import { isArrayFn, isString } from '../../utils/JSTypeUtil'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomImage from './CustomImage'
const resizeMode = { resizeMode: 'contain' }
export default class CustomImageSize extends Component {
  static propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    source: PropTypes.oneOfType([PropTypes.object, PropTypes.number])
  }

  render () {
    const {
      style,
      size,
      source,
      viewStyle,
      ...rest
    } = this.props
    let newStyle
    if (isArrayFn(style)) {
      newStyle = [resizeMode, ...style]
    } else {
      newStyle = { ...resizeMode, ...style }
    }
    return (
      <View style={[styles.View, viewStyle]}>
        <CustomImage style={newStyle} source={source} rest={rest} />
        <View style={styles.viewStyle}></View>
        {
          size && size > 0 && <Text style={styles.AlbumText}>{'+' + size}</Text>
        }
      </View>
    )
  }
}
const styles = StyleSheet.create({
  View: {
    position: 'relative'
  },
  viewStyle: { position: 'absolute', borderRadius: ScaleS(16), width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.5)' },
  AlbumText: {
    position: 'absolute',
    fontSize: ScaleT(15),
    color: '#fff',
    marginLeft: ScaleS(10),
    top: ScaleS(6)
  }
})
